<template>
    <div class="adv-search">
        <el-input v-model="filter.value" placeholder="请输入" class="my-search" clearable @keyup.enter.native="onSearch">
            <el-tooltip slot="prepend" class="item" effect="dark" content="搜索条件" placement="bottom">
                <el-select  v-model="filter.field" placeholder="请选择" style="width:100px; color:#000" @change="onChange">
                    <el-option v-for="(o, index) in newFields" :key="index" :label="o.title" :value="o.field" />
                </el-select>
            </el-tooltip>
            <template #append>
                <el-tooltip class="item" effect="dark" content="普通搜索" placement="bottom">
                    <el-button icon="el-icon-search" style="color:#000" @click="onSearch" />
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="高级搜索" placement="bottom">
                    <el-button icon="el-icon-more" style="color:#000" @click="searchWindowVisible=true"></el-button>
                </el-tooltip>
            </template>
        </el-input>
        <Search-Window :visible.sync="searchWindowVisible" :fields="fields" :modal="true" @click="onSearchFilter" />
    </div>
</template>

<script>
/**
 * 查询组件
 * 使用说明
  import MySearch from '@/components/my-search'
  components: { MySearch }
  fields: [
    { field: 'userName', title: '用户名', default: true },
    { field: 'nickName', title: '昵称', type: 'string' },
    { field: 'createdTime', title: '创建时间', type: 'date', config: { type: 'date' }}
  ],
  <my-search :fields="fields" @click="onSearch" />
*/
import SearchWindow from "./search-window";
export default {
    name: "AdvSearch",
    components: { SearchWindow },
    props: {
        fields: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    data() {
        const newFields = [];
        this.fields.forEach((a) => {
            if (!a.type || a.type === "string") {
                newFields.push(a);
            }
        });

        let fieldValue = "";
        if (newFields.length > 0) {
            const field = newFields.find((a) => a.default === true);
            if (field) {
                fieldValue = field.value;
            } else {
                fieldValue = newFields[0].value;
            }
        }
        return {
            newFields: newFields,
            filter: {
                field: fieldValue,
                operator: "Equal",
                value: "",
            },
            searchWindowVisible: false,
        };
    },
    computed: {},
    watch: {},
    mounted() {},
    methods: {
        onChange(value) {
            // const field = this.fields.find(a => a.value === value)
            this.filter.value = "";
        },
        // 查询
        onSearch() {
            const dynamicFilter =
                this.filter.value !== "" ? { ...this.filter } : null;
            this.$emit("normal", dynamicFilter);
        },
        onSearchFilter(dynamicFilter) {
            const ret = this.$emit("adv", dynamicFilter);
            this.searchWindowVisible = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.adv-search {
    color: #000;
}

::v-deep .my-search-window {
    .el-dialog__body {
        padding: 10px;
    }
}
</style>
